<template>
	<view class="wuliu-box">
		<!-- <view class="map-box">
			<map :latitude="lat" :longitude="lng"></map>
		</view> -->
		<view class="content">
			<view class="info">
				<view class="kd" style="padding-top:20rpx;">
					<view class="left">
						<image :src="$img_base_url(losisticsinfo.kuaidi.logo)" mode="widthFix"></image>
						<text>中通快递：{{losisticsinfo.express_no}}</text>
					</view>
					<view class="right">
						<text @click="clickCopy(losisticsinfo.express_no)">复制</text> | <text>联系物流</text>
					</view>
				</view>
				<view class="wl-info">
					<!-- <wStatus>
						<text slot="title">已签收</text>
						<view slot="text" class="slot-text">
							06-05 14:00【郑州市】您的快递已签收，签收人在【郑州
							中原新天地小区店】取件。如有疑问请联系业务员:123456
							78910，代理点电话:12345678910，投诉电话:0371-123
							45678。感谢使用中通快递，期待再次为您服务!
						</view>
					</wStatus> -->
					<!-- <wStatus >
						<text slot="title">运输中</text>
						<view slot="text" class="slot-text">
							<view class="ys-item">
								<image class="xy-img" :src="$img_path('/pagesMine/28.png')" mode="widthFix"></image>
								<text>06-05 14:00【郑州市】快件已到达【郑州嵩山】【郑州市】快件已到达【郑州嵩山】【郑州市】快件已到达【郑州嵩山】</text>
							</view>
							<view class="ys-item">
								<image class="xy-img" :src="$img_path('/pagesMine/28.png')" mode="widthFix"></image>
								<text>06-05 14:00【郑州市】快件已到达【郑州嵩山】</text>
							</view>
							<view class="ys-item">
								<image class="xy-img" :src="$img_path('/pagesMine/28.png')" mode="widthFix"></image>
								<text>06-05 14:00【郑州市】快件已到达【郑州嵩山】</text>
							</view>
						</view>
					</wStatus> -->
					<cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep>
					<!-- <wStatus>
						<text slot="title">已揽收</text>
						<view slot="text" class="slot-text">
							06-05 14:00【黄山市】黄山（0000-0000000）黄山（1
							2345678910）已揽收
						</view>
					</wStatus> -->
					<!-- <wStatus v-for="item,index in losisticsinfo.express" :isLine="false">
						<text slot="title">{{item.status}}</text>
						<view slot="text" class="slot-text">
							{{item.ftime}}{{item.context}}
						</view>
					</wStatus> -->
				</view>
				<view class="s-address">
					<wStatus :isLine="false">
						<view class="icon" slot="l_icon">
							<image :src="$img_path('/pagesMine/29.png')" mode="widthFix"></image>
						</view>
						<text slot="title" class="title">{{losisticsinfo.order_address.address}}</text>
						<view slot="text" class="slot-text">
							{{losisticsinfo.order_address.name}} {{losisticsinfo.order_address.mobile}}
						</view>
					</wStatus>
				</view>
			</view>

			<!-- 			<view class="goods">
				<view class="g-item" v-for="item in 2">
					<image :src="$img_path('/mall/5.png')" mode="aspectFill"></image>
					<view class="info">
						<view class="title one-row">
							商品名称商品名称商...
						</view>
						<view class="spec">
							<view class="text">
								规格名称规格名称/规格名称
								规格名称
							</view>
							<view class="num">
								x 1
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getLogistics
	} from '@/utils/api/mallApi.js'
	import {
		getCopy
	} from '@/utils/uni_api.js'
	import wStatus from './components/w-status.vue';
	export default {
		components: {
			wStatus
		},
		data() {
			return {
				lat: '',
				lng: '',
				order_id: '',
				losisticsinfo: {},
				colors: "#fa436a",
				//模拟后台返回的数据
				stepData: []
			};
		},
		onLoad(options) {
			this.order_id = options.id
			uni.getLocation({
				type: 'gcj02',
				complete: (res) => {
					console.log(res, '-')
					this.lat = res.latitude
					this.lng = res.longitude
				}
			})
			this.logistics()
		},
		methods: {
			async logistics() {
				const {
					code,
					data
				} = await getLogistics({
					id: this.order_id
				})
				if (code == 1) {
					this.losisticsinfo = data
					this.stepData = data.express.map(item => {
						item.name = item.status
						item.time = item.ftime
						item.isNow = item.areaCode != null ? 0 : 1
						item.type = 0
						item.desc = item.context
						return item
					})
					console.log(this.stepData);
					// {
					// 		name: '提交申请',
					// 		time: '2023-06-09 20:01:49',
					// 		isNow: 1,
					// 		type: 1,
					// 		desc: '不想要了'
					// 	},
				}
			},
			clickCopy(text) {
				getCopy(text)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.wuliu-box {
		padding-bottom: 40rpx;

		.map-box {
			width: 100%;
			height: 546rpx;
			position: relative;
			overflow: hidden;

			map {
				width: 100%;
				height: calc(100% + 80rpx);
				position: absolute;
				top: -40rpx;
				z-index: 1;
			}
		}

		.content {
			padding: 0 16rpx;
			box-sizing: border-box;

			.info {
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-top: -18rpx;
				position: relative;
				z-index: 2;

				.kd {
					background: #F6F8FA;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
					padding: 20rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 56rpx;
							height: 56rpx;
						}

						text {
							font-weight: 500;
							font-size: 28rpx;
							color: #44464A;
							line-height: 40rpx;
							margin-left: 16rpx;
						}
					}

					.right {
						font-weight: 500;
						font-size: 28rpx;
						color: #F95624;
						line-height: 40rpx;

						&>text:first-child {
							margin-right: 10rpx;
						}

						&>text:last-child {
							margin-left: 10rpx;
						}
					}
				}

				.wl-info {
					// padding: 56rpx 20rpx 0;
					box-sizing: border-box;
					border-bottom: 2rpx solid #EEEEEE;

					.ys-item {
						padding: 20rpx 0;
						position: relative;

						&>image {
							position: absolute;
							left: -52rpx;
							top: 25rpx;
							// transform: translateY(-50%);
							z-index: 2;
							width: 24rpx;
							height: 24rpx;
						}
					}
				}

				.s-address {
					padding: 30rpx 20rpx 20rpx;

					.icon {

						// padding-top: 20rpx;
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.title {
						font-weight: bold;
						font-size: 28rpx;
						color: #B4B4B4;
						line-height: 40rpx;
					}

					.slot-text {
						font-weight: 400;
						font-size: 24rpx;
						color: #B4B4B4;
						line-height: 34rpx;
					}
				}
			}

			.goods {
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-top: 20rpx;
				width: 100%;
				padding: 24rpx 28rpx 4rpx;
				box-sizing: border-box;

				.g-item {
					display: flex;
					align-items: center;
					padding-bottom: 20rpx;

					image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 16rpx;
					}

					.info {
						width: calc(100% - 180rpx);
						padding-left: 20rpx;

						.title {
							width: 75%;
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
							line-height: 44rpx;
						}

						.spec {
							display: flex;
							align-items: flex-start;
							justify-content: space-between;
							margin-top: 20rpx;

							.text {
								width: 80%;
								font-weight: 400;
								font-size: 28rpx;
								color: #505050;
								line-height: 40rpx;
							}

							.num {
								font-weight: bold;
								font-size: 28rpx;
								color: #333333;
								line-height: 40rpx;
							}
						}
					}
				}
			}
		}
	}
</style>